<template>
	<view>
		<view class="m-form">
			<form @submit="subIdentity">
				<view class="u-form-itm">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">身份类型:</view>
					</view>
					<view class="u-form-r">
						<picker mode="selector" :range="idList" range-key="name" :value="idTypeIndex"
							@change="idTypeChange">
							<input class="u-ipt" placeholder="请选择身份类型" :value="idTypeName" disabled="true" />
						</picker>
					</view>
				</view>

				<view class="u-form-itm" @click="visibleChooseAddress">
					<view class="u-form-l">
						<image class="u-form-l-img" src="../../../static/icon/act-city.png" mode=""></image>
						<view class="u-label">地址:</view>
					</view>
					<view class="u-form-r">
						<textarea class="u-ipt" :auto-height="true" placeholder="请选择地址" :value="address"
							disabled="true" />
					</view>
				</view>

				<view v-if="visibleAddress">
					<view class="title">选择地址</view>
					<view class="u-form-itm">
						<view class="u-form-l">
							<view class="u-label">省份:</view>
						</view>
						<view class="u-form-r">
							<picker mode="selector" :range="proList" range-key="title" :value="proIndex"
								@change="proChange">
								<input class="u-ipt" placeholder="请选择省份" :value="proName" disabled="true" />
							</picker>
						</view>
					</view>
					<view class="u-form-itm">
						<view class="u-form-l">
							<view class="u-label">市级:</view>
						</view>
						<view class="u-form-r">
							<picker mode="selector" :range="cityList" range-key="title" :value="cityIndex"
								@change="cityChange">
								<input class="u-ipt" placeholder="请选择市级" :value="cityName" disabled="true" />
							</picker>
						</view>
					</view>
					<view class="u-form-itm">
						<view class="u-form-l">
							<view class="u-label">区级:</view>
						</view>
						<view class="u-form-r">
							<picker mode="selector" :range="areaList" range-key="title" :value="areaIndex"
								@change="areaChange">
								<input class="u-ipt" placeholder="请选择区级" :value="areaName" disabled="true" />
							</picker>
						</view>
					</view>

					<view class="u-form-itm">
						<view class="u-form-l">
							<view class="u-label">社区:</view>
						</view>
						<view class="u-form-r">
							<picker mode="selector" :range="communityList" range-key="title" :value="communityIndex"
								@change="communityChange">
								<input class="u-ipt" placeholder="请选择社区" :value="communityName" disabled="true" />
							</picker>
						</view>
					</view>

					<view class="u-form-itm">
						<view class="u-form-l">
							<view class="u-label">详细地址:</view>
						</view>
						<view class="u-form-r">
							<input class="u-ipt" placeholder="请选择详细地址" :value="detailAddress" disabled="true" />
						</view>
					</view>

					<view class="u-form-itm">
						<view class="u-form-l">
							<view class="u-label">房屋编号:</view>
						</view>
						<view class="u-form-r">
							<picker mode="selector" :range="roomList" range-key="door_number" :value="roomIndex"
								@change="roomChange">
								<input class="u-ipt" placeholder="请选择门牌号" :value="roomName" disabled="true" />
							</picker>
						</view>
					</view>

					<view class="u-form-sub">
						<button class="u-btn" type="default" form-type="submit">提交</button>
					</view>
				</view>
			</form>

			<!-- 搜索 -->
			<view v-if="visible" class="search-box">
				<view class="search">
					<view class="head">
						<view class="image-box">
							<image src="../../../static/icon/job.png" mode=""></image>
						</view>
						<input class="search-input" type="text" name="search" :value="search" confirm-type="search"
							placeholder="请输入地址" @confirm="addressSearch" />
					</view>
					<scroll-view scroll-y="true" style="height: 75vh;">
						<view class="content">
							<view class="content-item" v-for="(item, index) in searchAddressList" :key="index">
								<view @click="checkedAddress(item.id, item.address)">{{item.address}}</view>
							</view>
							<view v-if="searchAddressList && searchAddressList.length == 0">当前社区搜索不到该地址</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 遮罩 -->
			<view :class="active ? 'mask' : '' " @click="close"></view>
		</view>
	</view>
</template>

<script>
	import USER from '@/api/user/index.js'

	export default {
		data() {
			return {
				form: {},
				idList: [{ // 身份类型列表
						'name': '户主(房东)',
						'type': 1
					}, {
						'name': '租客',
						'type': 2
					},
					{
						'name': '物业',
						'type': 4
					}
				],
				idTypeIndex: '',
				idTypeName: '',
				idType: '',
				address: '', // 地址

				// 选择地址
				visibleAddress: false,
				parent_id: 0, // 用于取地区值
				proList: [], // 省份列表
				proIndex: 0, // 省份的下标
				proName: '', // 省份名
				cityList: [], // 市级列表
				cityIndex: 0, // 市级的下标
				cityName: '', // 市级名
				areaList: [], // 区级列表
				areaIndex: 0, // 区级的下标
				areaName: '', // 区级名
				communityList: [], // 社区列表
				communityIndex: 0, // 社区的下标
				communityName: '', // 社区名
				detailAddress: '', // 详细地址
				roomList: [], // 门牌号列表
				roomIndex: 0, // 门牌号下标
				roomName: '', // 门牌号名
				room_id: '', // 门牌号id
				search: '', // 搜索地址名
				searchAddressList: null, // 搜索地址出现的列表
				address_id: '', // 选中地址的id

				visible: false,
				active: false
			}
		},
		methods: {
			idTypeChange(e) {
				var self = this;
				self.idTypeIndex = e.detail.value;
				self.idTypeName = self.idList[self.idTypeIndex].name;
				self.idType = self.idList[self.idTypeIndex].type;
				self.visibleAddress = false;
				// 重置
				self.resetAddress();
			},
			// 是否显示选择地址
			visibleChooseAddress() {
				var self = this;
				if (self.idType) {
					// 获取省份
					self.visibleAddress = !this.visibleAddress;
					self.getPro();
					self.resetAddress();
				} else {
					uni.showToast({
						title: '请先选择身份类型',
						icon: 'none'
					})
				}
			},
			// 重置
			resetAddress() {
				var self = this;
				self.address = '';
				self.proName = '';
				self.cityName = '';
				self.areaName = '';
				self.communityName = '';
				self.detailAddress = '';
				self.roomName = '';
			},
			focus() {
				this.visible = !this.visible;
				this.active = !this.active;
				this.searchAddressList = null;
			},
			// 获取省份
			getPro() {
				var self = this;
				USER.areas(1, 10000).then(res => {
					self.proList = res.data.data;
				})
			},
			proChange(e) {
				var self = this;
				self.proIndex = e.detail.value;
				self.proName = self.proList[self.proIndex].title;
				self.parent_id = self.proList[self.cityIndex].id;
				self.cityName = '';
				self.areaName = '';
				self.communityName = '';
				self.detailAddress = '';
				self.roomName = '';
				self.getCity(self.proList[self.proIndex].id)
			},
			// 获取市级
			getCity(val) {
				var self = this;
				USER.areas(1, 10000, val).then(res => {
					self.cityList = res.data.data;
				})
			},
			cityChange(e) {
				var self = this;
				self.cityIndex = e.detail.value;
				self.cityName = self.cityList[self.cityIndex].title;
				self.parent_id = self.cityList[self.cityIndex].id;
				self.areaName = '';
				self.communityName = '';
				self.detailAddress = '';
				self.roomName = '';
				self.getArea(self.cityList[self.cityIndex].id)
			},
			// 获取区级
			getArea(val) {
				var self = this;
				USER.areas(1, 10000, val).then(res => {
					self.areaList = res.data.data;
				})
			},
			areaChange(e) {
				var self = this;
				self.areaIndex = e.detail.value;
				self.areaName = self.areaList[self.areaIndex].title;
				self.parent_id = self.areaList[self.areaIndex].id;
				self.communityName = '';
				self.detailAddress = '';
				self.roomName = '';
				self.getcommunity(self.areaList[self.areaIndex].id)
			},
			// 获取社区
			getcommunity(val) {
				var self = this;
				USER.areas(1, 10000, val).then(res => {
					self.communityList = res.data.data;
				})
			},
			communityChange(e) {
				var self = this;
				self.communityIndex = e.detail.value;
				self.parent_id = self.communityList[self.communityIndex].id;
				self.communityName = self.communityList[self.communityIndex].title;
				self.detailAddress = '';
				self.roomName = '';
			},

			// 搜索地址
			addressSearch(e) {
				var self = this;
				self.search = e.detail.value;
				uni.showLoading({
					title: '获取数据中，请稍候'
				})
				USER.searchAddress(1, 10000, self.parent_id, self.search).then(res => {
					uni.hideLoading();
					self.searchAddressList = res.data.data;
				})
			},
			// 选中地址
			checkedAddress(id, address) {
				var self = this;
				this.visible = false;
				this.active = false;
				self.detailAddress = address;
				self.address_id = id; // 选中的地址id
				if (self.idType == "1" || self.idType == "4") {
					self.address = self.proName + self.cityName + self.areaName + self.communityName + self.detailAddress;
					return true;
				}
				self.roomName = '';
				self.getRoom(id);
			},

			// 获取该地址的全部门牌号
			getRoom(val) {
				var self = this;
				USER.rooms(1, 10000, val).then(res => {
					self.roomList = res.data.data;
				})
			},
			roomChange(e) {
				var self = this;
				self.roomIndex = e.detail.value;
				self.roomName = self.roomList[self.roomIndex].door_number;
				self.room_id = self.roomList[self.roomIndex].id; // 选中的id
				self.address = self.proName + self.cityName + self.areaName + self.communityName + self.detailAddress +
					self.roomName;
			},

			// 提交
			subIdentity() {
				var self = this;
				if (!self.idType) {
					uni.showToast({
						title: '请选择身份类型',
						icon: 'none'
					});
					return false;
				}
				if (!self.address) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					});
					return false;
				}
				if (!self.proName) {
					uni.showToast({
						title: '请选择省份',
						icon: 'none'
					});
					return false;
				}
				if (!self.cityName) {
					uni.showToast({
						title: '请选择市级',
						icon: 'none'
					});
					return false;
				}
				if (!self.areaName) {
					uni.showToast({
						title: '请选择区级',
						icon: 'none'
					});
					return false;
				}
				if (!self.communityName) {
					uni.showToast({
						title: '请选择社区',
						icon: 'none'
					});
					return false;
				}
				if (!self.detailAddress) {
					uni.showToast({
						title: '请选择详细地址',
						icon: 'none'
					});
					return false;
				}
				if (self.idType == 2) {
					if (!self.roomName) {
						uni.showToast({
							title: '请选择门牌号',
							icon: 'none'
						});
						return false;
					}
				}
				self.form = {
					type: self.idType,
					address_id: self.address_id,
					address: self.address,
					room_id: self.room_id ? self.room_id : null
				};
				uni.showLoading({
					title: '正在提交，请稍候'
				})
				USER.addIdentity(self.form).then(res => {
					uni.hideLoading();
					if (self.idType == 1) {
						uni.showToast({
							title: '提交成功,请等待审核',
							success() {
								uni.reLaunch({
									url: '/pages/idChoose/index'
								})
							}
						})
					} else {
						uni.showToast({
							title: '提交成功,请等待户主(房东)审核',
							success() {
								uni.reLaunch({
									url: '/pages/idChoose/index'
								})
							}
						})
					}
				});
			},
			close() {
				var self = this;
				self.search = '';
				self.searchAddressList = null;
				self.active = !this.active;
				self.visible = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		margin-top: 20rpx;
		font-size: 40rpx;
		color: #2A9F93;
	}

	// 搜索框
	.search-box {
		position: absolute;
		bottom: 0;
		z-index: 99;
		width: 750rpx;
		height: 85vh;
		border-top: 1rpx solid #2A9F93;
		background-color: #FFFFFF;

		.search {
			display: flex;
			flex-direction: column;
			align-items: center;

			margin: 20rpx;

			.head {
				display: flex;
				align-items: center;
				height: 70rpx;
				border: 1rpx solid #ccc;

				.image-box {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 30rpx;
					padding: 20rpx;
					border-right: 1rpx solid #ccc;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.search-input {
					width: 600rpx;
					font-size: 28rpx;
					padding-left: 10rpx;
				}
			}

			.content {
				font-size: 34rpx;

				.content-item {
					padding: 20rpx 10rpx;
					border-bottom: 1rpx #ccc solid;
				}
			}
		}
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .5);
		z-index: 98;
	}
</style>
